<template>
  <div class="panel-body-detail">
        <span class="sort-menus">(拖拽选项可以进行排序)</span>
        <div class="panel-body panel-menus">
            <div class="panel-select">
                <span class="optional-title">排列样式</span>
                <el-select v-model="selectItem.column" @change="changColumn" class="arrangement-select" size="mini" placeholder="请选择排列样式">
                    <el-option label="三列排列" value="3"></el-option>
                    <el-option label="四列排列" value="4"></el-option>
                </el-select>
            </div>
            <draggable v-model="selectItem.menusList" @start="drag=true" @end="drag=false">
                <div class="panel-item" v-for="(item,index) in selectItem.menusList" :key="index">
                    <div class="imgs-icon">
                        <img :src="item.sPic" alt="">
                    </div>
                    <div class="text-select">
                        <articleListType v-model="item.article.cateId" :select-class="['article-select','com-select']"></articleListType>
                        <articleDetailList v-model="item.article.artId" :select-class="['article-select','com-select']" :article-type="item.article.cateId"></articleDetailList>
                        <el-input type="text" v-model="item.sName" @change="textChange(item)" :maxlength="4" size="mini" class="menu-edit-name"></el-input>
                    </div>
                    <div class="delete-btn" title="删除" @click.stop.prevent="removeItem(index)">
                        <i class="el-icon-delete item-delete"></i>
                    </div>
                </div>
            </draggable>
            <div class="optional-title">可选菜单</div>
            <div class="menus-list">
                <ul class="list-wrapper">
                    <li v-for="(item, index) in optionalMenus" :class="{'active': curClass(item) }" :key="index" @click.stop.prevent="addMenus(item)">
                        <div class="imgs u-icon">
                            <img :src="item.sPic" alt="">
                        </div>
                        <span class="menu-txt">{{item.sName}}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {mapGetters, mapMutations} from 'vuex';
import articleListType from './articleListType';
import articleDetailList from './articleDetailList';
import {listCampusIcon} from 'api/eschool';
import draggable from 'vuedraggable';
import _ from 'lodash'; // 引入lodash
export default {
    name: 'menusPanel',
    components: {
        draggable,
        articleListType,
        articleDetailList
    },
    data() {
        return {
            optionalMenus: [
                {
                    sName: '我是导航1',
                    sPic: require('../../../assets/eschool/icon1.png'),
                    article: {
                        cateId: '分类2',
                        artId: ''
                    }
                }
            ],
            drag: false,
            column: '三行排列', // FIXME: 3表示三行一列栅格 4表示四行一列 TODO:
            curIndex: -1
        }
    },
    computed: {
        ...mapGetters([
            'selectItem',
            'selectIndex',
            'phoneData'
        ])
    },
    created() {
        this._listCampusIcon();
    },
    methods: {
        // ...mapActions(),
        ...mapMutations([
            'SET_PANELDATA',
            'SELECT_ITEM'
        ]),
        // 改变列数
        changColumn(val) {
            this.selectItem.column = val;
        },
        // 添加到到选项中
        addMenus(item) {
            // this.selectItem.menusList.some((menus) => menus.sName == item.sName);
            // //console.log(this.selectItem.menusList, 'item');
            if (this.selectItem.menusList.length >= 20) {
                this.$message({
                    type: 'info',
                    message: '最多只能添加20个菜单项'
                });
                return;
            }
            var isRepeat = _.find(this.selectItem.menusList, {sName: item.sName});
            //console.log(isRepeat, 'isRepeat')
            if (isRepeat) {
                // this.$message({
                //     type: 'info',
                //     message: '导航不能重复添加'
                // })
                return;
            }
            this.update(item);
        },
        curClass(item) {
            if (_.find(this.selectItem.menusList, {sName: item.sName})) {
                return 'active'
            }
            return '';
        },
        // 删除元素
        removeItem(index) {
            if (this.selectItem.menusList.length <= 3) {
                this.$message({
                    type: 'info',
                    message: '至少有3个导航菜单'
                })
                return;
            }
            this.selectItem.menusList.splice(index, 1);
            //console.log(index, 'menus index');
            // this.update(this.selectItem.menusList);
        },
        update(item) {
            let menuObj = {
                type: 'menus',
                index: this.selectIndex,
                menuList: Object.assign({}, item)
            }
            this.SET_PANELDATA(menuObj);
        },
        textChange(item) {
            // var menusArray = _.without(this.selectItem.menusList, item);
            // if (menusArray.some((item) => {
            //     return item.sName== item.sName    
            // })) {
            //     this.$message({
            //         type: 'error',
            //         message: '菜单栏目名称重复了'
            //     })
            // }
        },
        _listCampusIcon() {
            listCampusIcon().then(res => {
                if (res&&res.data) {
                    var campusArray = res.data.content.map(item => {
                        item = Object.assign({}, item, {
                            article: {
                                artId: '',
                                cateId: ''
                            }
                        });
                        return item; 
                    });
                    // //console.log(campusArray);
                    this.optionalMenus = campusArray;
                }
            })
        }
    }
}
</script>
<style lang="scss">
    .sort-menus {
        font-size: 12px;
        color: #7a7a7a;
    }
    .panel-menus {
        .optional-title {
            font-size: 12px;
            color: #7a7a7a;
            margin-top: 50px;
            margin-bottom: 20px;
            font-family: MicrosoftYaHeiLight, '黑体';
        }
        .panel-item {
            height: 88px !important;
            .imgs-icon {
                float: left;
                width: 74px !important;
                height: 74px !important;
                text-align: center;
                margin-right: 5px;
                background: #fff;
                img {
                    margin-top: 8px;
                    width: 60px;
                }
            }
            .menu-edit-name {
                // margin-top: 5px;
            }
            .menu-edit-name, .com-select {
                width: 166px !important;
                margin-bottom: 5px;
            }
            .text-select {
                float: left;
                width: 166px;
            }
        }
        .menus-list{
            ul,li {
                list-style: none;
                overflow: hidden;
            }
            .list-wrapper {
                margin-right: -8px;
            }
            li{
                float: left;
                margin: 0 8px 8px 0;
                width: 64px;
                height: 64px;
                font-size: 12px;
                text-align: center;
                background: #f6f7f8;
                padding-top: 5px;
                cursor: pointer;
                position: relative;
            }
            li.active::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.74);
                // background: #ddd;
            }
            .imgs {
                margin: 0 auto;
                width: 32px;
                height: 32px;
                background-size: cover;
                background-position: center center;
                background-repeat: no-repeat;
                img{
                    width: 100%;
                }
            }
            @for $i from 1 through 12 {
                .u-icon-ic#{$i} { background-image: url(../../../assets/eschool/icon#{$i}.png); }
            }
            .menu-txt {
                display: inline-block;
                font-family: MicrosoftYaHeiLight;
                font-size: 12px;
                line-height: 26px;
                color: #333;
            }
        }
    }
</style>
